<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随访详情 - 编号 {{ record.id }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-vh-100 d-flex flex-column">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="/static/images/logo.png" alt="Logo" class="rounded-circle me-2" width="40" height="40">
                <span class="font-bold text-primary">眼底随访系统</span>
            </a>
            <div class="navbar-nav ms-auto">
                {% if is_admin %}
                <span class="nav-item nav-link">欢迎，管理员！</span>
                <a class="nav-item nav-link text-danger" href="/admin/logout">退出</a>
                {% else %}
                <span class="nav-item nav-link">欢迎，{{ user }}！</span>
                <a class="nav-item nav-link text-danger" href="/logout">退出</a>
                {% endif %}
            </div>
        </div>
    </nav>·

    <!-- 主要内容 -->
    <main class="flex-grow-1 container my-5">
        <div class="card w-100 max-w-4xl mx-auto p-6 shadow-lg rounded-xl fade-up" style="animation-delay: 0.1s">
            <h2 class="mb-6 text-center text-xl font-bold text-primary">随访记录详情</h2>

            <div class="mb-6 fade-up" style="animation-delay: 0.2s">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                        <p class="text-sm text-gray-500 mb-1">记录编号</p>
                        <p class="font-semibold text-primary">{{ record.id }}</p>
                    </div>
·                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                        <p class="text-sm text-gray-500 mb-1">患者名称</p>
                        <p class="font-semibold">{{ record.patient_name }}</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                        <p class="text-sm text-gray-500 mb-1">医生</p>
                        <p class="font-semibold">{{ record.doctor }}</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                        <p class="text-sm text-gray-500 mb-1">日期</p>
                        <p class="font-semibold">{{ record.date }}</p>
                    </div>
                </div>
            </div>

            <div class="row mb-6 fade-up" style="animation-delay: 0.3s">
                <div class="col-md-6 mb-4 md:mb-0">
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 h-full">
                        <h5 class="text-lg font-semibold mb-3 text-gray-700">左眼图像</h5>
                        <img src="{{ record.left_eye_url }}" alt="左眼图像" class="img-fluid rounded-lg border border-gray-200 w-full object-cover" style="max-height: 300px;">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 h-full">
                        <h5 class="text-lg font-semibold mb-3 text-gray-700">右眼图像</h5>
                        <img src="{{ record.right_eye_url }}" alt="右眼图像" class="img-fluid rounded-lg border border-gray-200 w-full object-cover" style="max-height: 300px;">
                    </div>
                </div>
            </div>

            <div class="mb-6 fade-up" style="animation-delay: 0.4s">
                <h4 class="text-lg font-semibold mb-3 text-gray-700">诊断结果</h4>
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <ul class="list-disc list-inside space-y-2">
                        {% for diag in record.diagnoses %}
                            <li class="flex items-center"><span class="font-medium mr-2">{{ diag.name }}:</span> <span class="px-2 py-1 rounded-full text-sm {% if diag.risk_level == '高危' %}bg-red-100 text-red-800{% elif diag.risk_level == '中危' %}bg-yellow-100 text-yellow-800{% else %}bg-green-100 text-green-800{% endif %}">{{ diag.risk_level }}</span></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <div class="mb-6 fade-up" style="animation-delay: 0.5s">
                <h4 class="text-lg font-semibold mb-3 text-gray-700">DeepSeek 诊断建议</h4>
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <p style="white-space: pre-line;">{{ record.advice_deepseek }}</p>
                </div>
            </div>


            <div class="mb-6 fade-up" style="animation-delay: 0.6s">
                <h4 class="text-lg font-semibold mb-3 text-gray-700">华佗模型诊断建议</h4>
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <p style="white-space: pre-line;">{{ record.advice_huatuo }}</p>
                </div>
            </div>



            <div class="d-flex justify-center fade-up" style="animation-delay: 0.8s">
                {% if is_admin %}
                <a href="/admin/dashboard" class="btn btn-secondary rounded-full px-6 py-2 hover:shadow-md transition-all duration-300">返回管理员仪表板</a>
                {% else %}
                <a href="/dashboard" class="btn btn-secondary rounded-full px-6 py-2 hover:shadow-md transition-all duration-300">返回记录列表</a>
                {% endif %}
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 shadow-inner">
        <div class="container text-center text-gray-600">
            <p>© 2025 眼底随访系统. 保留所有权利.</p>
        </div>
    </footer>
</body>
</html>
